<script setup>
import {ref, inject} from "vue";
import {addAllowMailAPI} from "@/api/manager.js";
import { InfoFilled } from '@element-plus/icons-vue'
import {elErrorMessageTip} from "@/utils/MessageTipUtils.js";

// 是否显示添加权限
const {addAllowMailVisible, searchByCondition} = inject('addAllowMailVisible')

// 输入数据
const mail = ref('')
const disabled = ref(false)

// 确认添加新权限
const confirmAdd = async () => {
  // 未输入
  if (mail.value.length <= 0) {
    elErrorMessageTip("请先完成邮箱输入")
    return
  }
  const res = await addAllowMailAPI(mail.value, disabled.value)
  // 成功
  if (res) {
    // 重新查询权限列表
    await searchByCondition()
    mail.value = ''
    disabled.value = false
    addAllowMailVisible.value = false
  }
}
// 取消添加新权限
const cancelAdd = () => {}
</script>

<template>
  <div class="add-authority">
    <el-dialog v-model="addAllowMailVisible" title="新增管理员邮箱">
      <el-form
          label-position="right"
          label-width="130px"
      >
        <el-form-item label="邮箱">
          <el-input
              v-model="mail"
              placeholder="请输入邮箱"
              clearable
              :maxlength="255"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-radio-group v-model="disabled" class="ml-4">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">开放</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="flex justify-end items-center">
          <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否确认添加新邮箱？"
              @confirm="confirmAdd"
              @cancel="cancelAdd"
          >
            <template #reference>
              <el-button type="primary" plain>添加邮箱</el-button>
            </template>
          </el-popconfirm>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>